<template>
  <div id="app">
    <el-card
        style="width: 100%;">
      <el-descriptions class="margin-top" :column="2" title="设计" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            负责人
          </template>
          <el-input></el-input>
        </el-descriptions-item>
        <el-descriptions-item span="2">
          <template slot="label">
            <i class="el-icon-user"></i>
            协作人
          </template>
          <el-input></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-alarm-clock"></i>
            开始日期
          </template>
          <el-input></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-alarm-clock"></i>
            截止日期
          </template>
          <el-input></el-input>
        </el-descriptions-item>

        <el-descriptions-item span="2">
          <template slot="label">
            <i class="el-icon-office-building"></i>
            工作内容
          </template>
          <el-input></el-input>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <div v-for="(card, cardIndex) in cards" :key="cardIndex">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ card.title }}</span>
          <el-button v-if="cardIndex !== 0" style="float: right; padding: 3px 0" type="text"
                     @click="removeCard(cardIndex)">删除此节点
          </el-button>
          <el-button style="float: right; padding: 3px 0" type="text" @click="addSubTask()">创建子任务</el-button>
          <el-button style="float: right; padding: 3px 0" type="text" @click='alert("发起当前节点评审")'>发起评审</el-button>
        </div>
        <el-form ref="form" :model="schemeForm" label-width="120px">
          <el-form-item label="工作内容和要求">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="负责人">
            <el-input style="width: 35%"></el-input>
          </el-form-item>
          <el-form-item label="计划时间">
            <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="实际时间">
            <el-date-picker
                v-model="value2"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-input v-model="newItemLabel" placeholder="请输入标签">
              <el-button type="danger" slot="append" @click="addItem()">添加字段</el-button>
            </el-input>
          </el-form-item>
          <el-form-item v-for="(item, index) in schemeForm.dynamicItems"
                        :key="index"
                        :label="item.label">
            <el-input v-model="item.value">
              <el-button type="danger" slot="append" @click="removeItem(index)">删除字段</el-button>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-card v-for="(subTask, index) in subTasks" :key="index" shadow="never">
              <div slot="header" class="clearfix">
                <span>{{ subTask.title }}</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="removeSubTask(index)">删除此任务
                </el-button>
                <el-button style="float: right; padding: 3px 0" type="text" @click='alert("发起当前节点评审")'>发起评审</el-button>
              </div>
              <el-form ref="form" :model="schemeSubForm" label-width="120px" size="mini">
                <el-form-item label="工作内容和要求">
                  <el-input></el-input>
                </el-form-item>
                <el-form-item label="负责人">
                  <el-input style="width: 35%"></el-input>
                </el-form-item>
                <el-form-item label="计划时间">
                  <el-date-picker
                      v-model="value3"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="实际时间">
                  <el-date-picker
                      v-model="value4"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="newSubItemLabel" placeholder="请输入标签">
                    <el-button type="danger" slot="append" @click="addSubItem()">添加字段</el-button>
                  </el-input>
                </el-form-item>
                <el-form-item v-for="(item, index) in schemeSubForm.dynamicItems"
                              :key="index"
                              :label="item.label">
                  <el-input v-model="item.value">
                    <el-button type="danger" slot="append" @click="removeSubItem(index)">删除字段</el-button>
                  </el-input>
                </el-form-item>
              </el-form>
            </el-card>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <el-input v-model="newCardTitle" placeholder="请输入新设计节点的标题">
      <el-button @click="showAddNodeDialog" slot="prepend">创建设计节点</el-button>
    </el-input>
    <el-card class="box-card" style="margin: 20px 0">
      <div slot="header" class="clearfix">
        <span>评审信息</span>
        <el-button style="float: right; padding: 3px 0" type="text">导出</el-button>
      </div>
      <el-descriptions title="方案评审" class="margin-top" :column="1" border>
        <el-descriptions-item label="评审人员">张三、李四</el-descriptions-item>
        <el-descriptions-item label="评审原件">文件附件</el-descriptions-item>
        <el-descriptions-item label="评审意见">部分修改</el-descriptions-item>
        <el-descriptions-item label="评审结果">
          <el-tag size="small">通过</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <el-divider content-position="left"></el-divider>
      <el-descriptions title="评审标题（来源于自定义节点中的评审）" class="margin-top" :column="1" border>
        <el-descriptions-item label="评审人员">王五、赵六</el-descriptions-item>
        <el-descriptions-item label="评审原件">文件附件</el-descriptions-item>
        <el-descriptions-item label="评审意见">部分修改</el-descriptions-item>
        <el-descriptions-item label="评审结果">
          <el-tag size="small">修改</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>设计更改</span>
        <el-button style="float: right; padding: 3px 0" type="text">导出</el-button>
      </div>
      <el-form ref="form" label-width="120px">
        <el-form-item v-for="(item, index) in changesForm" :key="index" :label="'补充' + (index + 1)">
          <div style="border: 1px solid #E8EAF6">
            <el-form-item label="上传文件">
              <el-upload
                  class="upload-demo"
                  :action="item.upload.action"
                  :on-preview="item.upload.onPreview"
                  :on-remove="item.upload.onRemove"
                  :before-remove="item.upload.beforeRemove"
                  :multiple="item.upload.multiple"
                  :limit="item.upload.limit"
                  :on-exceed="item.upload.onExceed"
                  :file-list="item.upload.fileList">
                <el-button type="text" style="margin-right: 30px">点击上传</el-button>
                <span v-html="textTime"></span>
              </el-upload>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="item.remark"></el-input>
            </el-form-item>
            <el-form-item label="审批记录">
              <el-steps direction="vertical" :active="1" :space="80" style="margin: 20px">
                <el-step v-for="(step, stepIndex) in item.steps" :key="stepIndex" :title="step.title"
                         :description="step.description"></el-step>
              </el-steps>
            </el-form-item>

            <el-button v-if="index > 0" @click="removeChanges(index)" style="margin: 20px 100px"><i
                class="el-icon-minus"></i>删除
            </el-button>

          </div>
        </el-form-item>
        <el-form-item>
          <el-button @click="addChanges()"><i class="el-icon-plus"></i>继续添加</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-button type="success" @click="onSubmit()">完成</el-button>
  </div>
</template>

<script>
export default {
  name: "DesiginView",
  data() {
    return {
      labelPosition: 'left',
      newCardTitle: '',
      newItemLabel: '',
      newSubItemLabel: '',
      schemeForm: {
        dynamicItems: [],
      },
      schemeSubForm: {
        dynamicItems: [],
      },
      subTasks: [], // 子任务数组
      nextSubTaskId: 1,// 用于生成子任务的ID，确保key的唯一性
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      cards: [
        {title: '1.方案设计'}
      ],
      reviewForm: {},
      changesForm: [
        {
          upload: {
            action: "https://jsonplaceholder.typicode.com/posts/",
            onPreview: this.handlePreview,
            onRemove: this.handleRemove,
            beforeRemove: this.beforeRemove,
            multiple: true,
            limit: 3,
            onExceed: this.handleExceed,
            fileList: this.fileList
          },
          // 备注
          remark: '',
          // 审批记录
          steps: [
            {title: '1.提交(设计负责人)', description: '说明：'},
            {title: '2.初审(项目负责人、部门部长、主管领导)', description: '意见：'},
            {title: '3.审批(总经理)', description: '意见：'}
          ]
        }],
    }
  },
  methods: {
    addItem() {
      if (this.newItemLabel.trim() !== '') {
        // 向dynamicItems数组添加一个新的表单项对象
        this.schemeForm.dynamicItems.push({
          label: this.newItemLabel,
          value: '', // 新表单项的值，初始为空
        });
        this.newItemLabel = ''; // 重置输入框
      }
    },
    removeItem(index) {
      // 从dynamicItems数组中移除指定索引的表单项
      this.schemeForm.dynamicItems.splice(index, 1);
    },
    addSubItem() {
      if (this.newSubItemLabel.trim() !== '') {
        // 向dynamicItems数组添加一个新的表单项对象
        this.schemeSubForm.dynamicItems.push({
          label: this.newSubItemLabel,
          value: '', // 新表单项的值，初始为空
        });
        this.newSubItemLabel = ''; // 重置输入框
      }
    },
    removeSubItem(index) {
      // 从dynamicItems数组中移除指定索引的表单项
      this.schemeSubForm.dynamicItems.splice(index, 1);
    },
    addSubTask() {
      // 添加子任务
      this.subTasks.push({
        id: this.nextSubTaskId++,
        title: `子任务 ${this.nextSubTaskId}`
      });
    },
    removeSubTask(index) {
      // 根据索引删除子任务
      this.subTasks.splice(index, 1);
    },
    showAddNodeDialog() {
      const newCard = {
        title: this.newCardTitle,
        schemeForm: {
          workContent: '',
          responsible: '',
          dynamicItems: [],
          // 其他表单数据
        },
        newItemLabel: '',
        newSubItemLabel: '',
        subTasks: [],
      };
      this.cards.push(newCard);
    },
    removeCard(index) {
      // 从cards数组中移除指定索引的卡片
      this.cards.splice(index, 1);
    },
    addChanges() {
      // 假设productionForm是一个数组，每个元素对应一个表单项
      this.changesForm.push({
        upload: {
          action: "https://jsonplaceholder.typicode.com/posts/",
          onPreview: this.handlePreview,
          onRemove: this.handleRemove,
          beforeRemove: this.beforeRemove,
          multiple: true,
          limit: 3,
          onExceed: this.handleExceed,
          fileList: this.fileList
        },
        remark: '',
        steps: [
          {title: '1.提交(设计负责人)', description: '说明：'},
          {title: '2.初审(项目负责人、部门部长、主管领导)', description: '意见：'},
          {title: '3.审批(总经理)', description: '意见��'}
        ]
      });
    },
    removeChanges(index) {
      this.changesForm.splice(index, 1);
    },
    onSubmit() {
      window.location.href = 'Manu'
    }
  }
}
</script>

<style scoped>
.el-divider {
  margin: 35px auto;
}

.el-divider span {
  font-size: 17px;
  font-weight: 100;
  color: #000;
}

.el-button{
  margin: 0 10px;
}
</style>